<template>
  <div class="goods-options z-index-2">
    <ul class="goods-options-list">
      <li class="goods-options-list-item"
          v-for="(item,index) in optionsDatas"
          :key="index">
        <a class="goods-options-list-item-content"
           @click="onOptionsItemClick(item)">
          <span class="goods-options-list-item-content-name"
                :class="{'goods-options-list-item-content-name-active':item.id === selectOption.id }">{{item.name}}</span>
          <span class="goods-options-list-item-content-caret caret"
                v-if="item.subs.length"
                :class="[(isShowSubsOption && selectOption.id == item.id) ? 'goods-options-list-item-content-caret-open':'goods-options-list-item-content-caret-close']"></span>
        </a>
      </li>
    </ul>
    <transition name="sub-transition">
      <div class="options-sub-content"
           v-if="isShowSubsOption">
        <ul class="options-sub-content-list">
          <li class="options-sub-content-list-item"
              v-for="(item,index) in selectOption.subs"
              :key="index"
              @click="onSubsItemClick(item)">
            <a class="options-sub-content-list-item-content">
              <span class="options-sub-content-list-item-content-name"
                    :class="{'options-sub-content-list-item-content-name-active':item.id === selectOption.id}">{{item.name}}</span>
              <img src="@img/options-select.svg"
                   class="options-sub-content-list-item-content-select"
                   v-show="item.id === selectOption.id">
            </a>
          </li>
        </ul>
      </div>
    </transition>
    <!-- 遮盖层 -->
    <cover v-if="isShowSubsOption"
           @onClose='onClose'>
    </cover>
  </div>
</template>
<script>
import Cover from '@c/currency/Cover.vue'
export default {
  data () {
    return {
      // 筛选项数据源
      optionsDatas: [
        {
          id: '1',
          name: '默认',
          subs: [
            {
              id: '1',
              name: '默认'
            },
            {
              id: '1-2',
              name: '价格由高到底'
            },
            {
              id: '1-3',
              name: '销量由高到底'
            }
          ]
        },
        {
          id: '2',
          name: '有货优先',
          subs: [

          ]
        },
        {
          id: '3',
          name: '直营优先',
          subs: []
        }
      ],
      selectOption: {},
      isShowSubsOption: false
    }
  },
  created () {
    this.selectOption = this.optionsDatas[0]
  },
  methods: {
    // 一级选项点击事件
    onOptionsItemClick (val) {
      /**
       * 一定要注意，vue是数据驱动视图，在设计数据的时候要考虑全面
       * 点击一级选项我们首想想到的是，把选中数据赋值为点击数据但是此时我们需要注意这个组件的逻辑
       * 在直接赋值之前，要先判断有没有子选项分为几种情况
       * 1、有子选项且一级选项未被点击，此刻我们需要展示子选项
       * 2、子选项被展开了，关闭子选项
       */
      if (this.isShowSubsOption) {
        this.isShowSubsOption = false
      } else if (val.subs.length && val.id === this.selectOption.id) {
        this.isShowSubsOption = true
      } else {
        this.$emit('onOptionsItemClick', val.id)
      }
      this.selectOption = val
    },
    onSubsItemClick (val) {
      this.optionsDatas = this.optionsDatas.map((item, index) => {
        item.subs.forEach(value => {
          if (val.id === value.id) {
            item.id = value.id
            item.name = value.name
          }
        })
        return item
      })
      this.$emit('onOptionsItemClick', val.id)
      this.isShowSubsOption = false
    },
    onClose () {
      this.isShowSubsOption = false
    }
  },
  components: {
    Cover
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable.scss";
/**
  在v-if和v-show会触发此动画
*/
.sub-transition-enter-active {
  animation-name: sub-open;
  animation-duration: 0.3s;
}
.sub-transition-leave-active {
  animation-duration: 0.3s;
  animation-name: sub-close;
}
@keyframes sub-open {
  0% {
    max-height: 0;
  }
  100% {
    max-height: px2rem(180);
  }
}
@keyframes sub-close {
  0% {
    max-height: px2rem(180);
  }
  100% {
    max-height: 0;
  }
}
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: px2rem(8) solid $MainColor;
  border-left: px2rem(6) solid transparent;
  border-right: px2rem(6) solid transparent;
}
.goods-options {
  width: 100%;
  border-bottom: px2rem(1) solid $lineColor;
  &-list {
    width: 100%;
    display: flex;
    height: px2rem(46);
    background: white;
    position: relative;
    z-index: 10;
    &-item {
      flex-grow: 1;
      &-content {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        &-name {
          font-size: px2rem($infoSize);
          margin-right: px2rem($marginSize);
        }
        &-name-active {
          color: $MainColor;
        }
        &-caret {
          &-open {
            transform: rotate(-180deg);
            transition: all 0.3s;
          }
          &-close {
            transform: rotate(0deg);
            transition: all 0.3s;
          }
        }
      }
    }
  }
  .options-sub-content {
    position: absolute;
    z-index: 10;
    width: 100%;
    max-height: px2rem(180);
    overflow-y: scroll;
    background: white;
    &-list {
      &-item {
        &-content {
          display: flex;
          align-items: center;
          border-top: px2rem(1) solid $lineColor;
          height: px2rem(44);
          box-sizing: border-box;
          padding: px2rem($marginSize);
          &-name {
            font-size: px2rem($infoSize);
            flex-grow: 1;
            &-active {
              color: $MainColor;
            }
          }
          &-select {
            width: px2rem(18);
            height: px2rem(18);
          }
        }
      }
    }
  }
}
</style>